<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="节名：">
        <div>{{ treeInf.catalogueName }}</div>
      </el-form-item>
      <el-form-item label="视频：">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          v-model="ruleForm.video"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :limit="1"
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">选择视频</el-button>
        </el-upload>
      </el-form-item>
      <!-- <el-form-item label="课件：">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          v-model="ruleForm.courseware"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :limit="1"
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">选择课件</el-button>
        </el-upload>
      </el-form-item> -->
      <el-form-item label="排序：">
        <el-input-number
          v-model="treeInf.catalogueSort"
          @change="handleChange"
          :min="1"
          :max="10"
          :disabled="isEdit"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="结课考核：">
        <el-switch
          :value="treeInf.hasTask"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-value="100"
          inactive-value="0"
          active-text="是"
          inactive-text="否"
          disabled
        >
        </el-switch>
      </el-form-item>
      <el-form-item v-show="isEdit">
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
      v-else
    >
      <el-form-item label="节名：">
        <el-input v-model="ruleForm.sectionname"></el-input>
      </el-form-item>
      <el-form-item label="视频：">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          v-model="ruleForm.video"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :limit="1"
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">选择视频</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="课件：">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          v-model="ruleForm.courseware"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :limit="1"
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">选择课件</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="排序：">
        <el-input-number
          v-model="ruleForm.num"
          @change="handleChange"
          :min="1"
          :max="10"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="结课考核：">
        <el-switch
          v-model="ruleForm.value"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-value="100"
          inactive-value="0"
          active-text="是"
          inactive-text="否"
        >
        </el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form> -->
  </div>
</template>
<script>
export default {
  props: {
    putTreeInf: {
      type: Object,
      default: () => "",
    },
  },
  data() {
    return {
      fileList: [],
      treeInf: "",
      isEdit: true,
      ruleForm: {
        // 节名
        sectionname: "",
        // 视频
        video: "",
        // 课件
        courseware: false,
        // 计数器
        num: 1,
        // 结课考核
        assess: "",
        value: "100",
      },
      rules: {
        sectionname: [
          { required: true, message: "请输入节名", trigger: "blur" },
        ],
        // region: [
        //   { required: true, message: "请选择活动区域", trigger: "change" },
        // ],
      },
    };
  },
  watch: {
    putTreeInf(newV, oldV) {
      console.log("树里来的数据", newV);
      this.treeInf = newV;
    },
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 视频
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 计数器
    handleChange(value) {
      console.log(value);
    },
  },
};
</script>